<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box{width:1000px;overflow: hidden;border: solid 1px black;margin: 0 auto;}
        .magnifier{float: left;width: 500px;}
        .magnifier img{width: 80%;height:80%;}

        .cont{float: right;width: 500px;}
        .cont .color{display: flex;}
        .color .list{display: flex;}
        .list dl{padding: 0;margin: 0 10px;} 
        .list dd{padding: 0;margin: 0;} 
        .list dt{width:40px;height:40px;border: solid 2px #333;} 
    </style>
</head>
<body>
    <h1>这是商品详情</h1><a href="list.html">继续选购</a>
    <div class="box">
        
    </div>
<script src="js/jquery.2.2.4.js"></script>
<script>

    // console.log(location.search.split("=")[1]);

    $.ajax({
        url:"http://localhost:3000/api",
        data:{
            type:"goods"
        },
        success:res=>{
            // console.log(res);
            let i;
            res.some((item,idx) => {
                i = idx;
                                    // 详情页，在获取到所有商品数据后，解析url后拼接的数据，做出比对，一致，就是要渲染的商品数据
                return item.goodsId === location.search.split("=")[1];
            });

            console.log(res[i]);
            $(".box").html(`<div class="magnifier">
                                <!-- <div class="s_box"></div>
                                <div class="b_box"></div> -->
                                <img src="${res[i].url.lImg}" alt="">
                            </div>
                            <div class="cont">
                                <h3>${res[i].name}</h3>
                                <h4>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</h4>
                                <p>${res[i].price}</p>
                                <p>${res[i].tip}</p>
                                <div class="color">
                                    可选颜色：
                                    <div class="list">
                                        ${createColor(res[i].color)}
                                    </div>
                                </div>
                </div>`);

            // 切记，一定要在数据请求成功之后，页面渲染结束后，再去做附加功能：放大镜，加入购物车，点击效果.....
            new magnifier();
        },
        dataType:"json"
    })


    function createColor(data){
        // console.log(data)
        let str = "";
        data.forEach(element => {
            str += `<dl>
                        <dt style="background: ${element.c};"></dt>
                        <dd>${element.t}</dd>
                    </dl>`
        });
        return str;
    }

    class magnifier{
        constructor(){
            console.log($(".magnifier").find("img"))
        }
    }
    

</script>
</body>
</html>